<template>
  <div class="brand">
    <div class="brand-list animate-list">
      <div class="brand-title">
        <img
          class="brand-decorate"
          src="../static/brand_decorate_left@3x.png"
          alt=""
        />
        <div class="brand-title-middle">
          <div class="title">孩子王品牌年度金榜</div>
          <div class="time-info">12月25日揭晓</div>
        </div>
        <img
          class="brand-decorate"
          src="../static/brand_decorate_right@3x.png"
          alt=""
        />
      </div>
      <div class="brand-cup"></div>
      <div class="brand-info">年度最受用户喜爱品牌榜单</div>
      <div class="brand-explain">
        这里是展示该榜单评选规则，这里是展示该榜单评选规则
      </div>
    </div>
    <div class="coming-soon"></div>
  </div>
</template>

<script>
export default {
  name: 'Haiziwang',
  props: {
    msg: String,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
.brand {
  position: relative;
  height: rem(590.5);
  .brand-list {
    background: url('../static/brand_bgc2@3x.png');
    background-size: 100%;
    width: rem(701.8);
    height: rem(734);
    position: absolute;
    margin: rem(32.5) rem(23);
    border-radius: rem(25.64);
    .brand-title {
      display: flex;
      padding: rem(37.5) rem(151) rem(51);
      text-align: center;
      .brand-decorate {
        width: rem(32);
        height: rem(26);
      }
      .brand-title-middle {
        margin: 0 rem(14);
        .title {
          color: #262626;
          font-size: rem(34);
          line-height: rem(48);
          letter-spacing: 0;
          font-weight: 600;
        }
        .time-info {
          color: #a18f80;
          font-size: rem(24);
          line-height: rem(33);
        }
      }
    }
    .brand-cup {
      background: url('../static/cup@3x.png');
      width: rem(210);
      height: rem(210);
      background-size: 100%;
      margin: 0 auto;
    }
    .brand-info {
      color: #262626;
      font-size: rem(34);
      font-weight: 600;
      margin: rem(19) auto rem(20);
      text-align: center;
    }
    .brand-explain {
      color: #a18f80;
      font-size: rem(26);
      margin: 0 auto;
      width: rem(527);
      text-align: center;
    }
  }
  .animate-list {
    animation: list-refresh 0.8s;
  }
  @keyframes list-refresh {
    from {
      margin-top: rem(280);
    }
    to {
      margin-top: rem(32.5);
    }
  }
  .coming-soon {
    position: absolute;
    top: rem(540.5);
    width: rem(750);
    height: rem(340);
    background: url('../static/coming_soon@3x.png');
    background-size: 100%;
  }
}
</style>
